.toc-container {
    position: fixed;
    left: 40px;
    top: 200px; /* 固定的top值 */
    width: 220px;
    max-height: 80vh;
    overflow-y: auto;
    background-color: transparent;
    padding: 10px;
    font-size: 14px;
    z-index: 1000;
    transition: all 0.3s ease;
    /* 添加滚动条平滑效果 */
    scroll-behavior: smooth;
}

/* 默认所有标题可见，JavaScript会控制隐藏 */
.toc-container li {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.4s ease, visibility 0.4s ease;
}

/* 当鼠标悬停在目录上时，显示所有标题 */
.toc-container:hover li {
    opacity: 1 !important;
    visibility: visible !important;
}


.toc-container::-webkit-scrollbar {
    width: 3px;
}

.toc-container::-webkit-scrollbar-thumb {
    background-color: #444;
    border-radius: 3px;
}

.toc-container ul {
    list-style: none;
    padding: 0;
    margin: 0;
    /* 添加左侧垂直线 */
    position: relative;
}

.toc-container li {
    margin: -1px 0;
    padding-left: 15px;
    position: relative;
}

/* 移除圆点样式 */
.toc-container li::before {
    display: none; /* 隐藏圆点 */
}

/* 增加文字左侧内边距 */
.toc-container a {
    color: #aaa;
    text-decoration: none;
    display: block;
    text-align: left;
    padding: 4px 0 4px 8px; /* 减少内边距 */
    transition: all 0.4s ease;
    font-size: 13px;
    margin: 1px 0;
}

.toc-container a:hover {
    color: #ffffff;
    transform: translateX(3px);
}

.toc-container a.active {
    color: #ffffff;
    font-weight: bold;
}

/* 添加章节编号 */
.toc-container a::before {
    content: "";
    display: inline-block;
    height: 8px;
    border-radius: 4px;
    background-color: #ff7e79;
    margin-right: 8px;
    vertical-align: middle;
    transition: all 0.2s ease;
}

/* 根据标题层级设置矩形长度 */
.toc-container li.h1 a::before { width: 50px; }
.toc-container li.h2 a::before { width: 40px; }
.toc-container li.h3 a::before { width: 30px; }
.toc-container li.h4 a::before { width: 20px; }
.toc-container li.h5 a::before { width: 15px; }
.toc-container li.h6 a::before { width: 10px; }

/* 缩进不同级别的标题 */
.toc-container li.h2 { padding-left: 0; }
.toc-container li.h3 { padding-left: 20px; }
.toc-container li.h4 { padding-left: 40px; }
.toc-container li.h5 { padding-left: 60px; }
.toc-container li.h6 { padding-left: 80px; }

/* 移除左侧垂直线，保持简约风格 */
.toc-container::after {
    display: none;
}

/* 目录切换按钮样式 */
.toc-toggle-button {
    position: fixed;
    top: 20px;
    left: 20px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, 0.5);
    border: none;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 1001;
    transition: all 0.2s ease;
    opacity: 0;
    transform: translateY(-20px);
}

.toc-toggle-button.visible {
    opacity: 1;
    transform: translateY(0);
}

.toc-toggle-button:hover {
    background-color: rgba(50, 50, 50, 0.8);
    transform: scale(1.05);
}

.toc-toggle-button svg {
    width: 20px;
    height: 20px;
}

/* 目录可见状态 */
.toc-container.toc-visible {
    transform: translateX(0);
    opacity: 1;
}

/* 在小屏幕上默认隐藏目录 */
@media (max-width: 1200px) {
    .toc-container {
        transform: translateX(-200px);
        opacity: 0;
    }
}

/* 移除目录项的圆点，保持简约风格 */
.toc-container li::before {
    display: none;
}

/* 移除活动项的高亮圆点 */
.toc-container li a.active + li::before {
    display: none;
}

/* 响应式设计 */
@media (max-width: 1400px) {
    .toc-container {
        left: 10px;
        width: 180px;
    }
}



@media (max-width: 1200px) {
    .toc-container {
        transform: translateX(-110%); /* 在小屏幕上默认隐藏目录，但保持可访问性 */
    }
    
    /* 当添加toc-visible类时显示目录 */
    .toc-container.toc-visible {
        transform: translateX(0);
    }
}

/* TOC切换按钮样式 */
.toc-toggle-button {
    position: fixed;
    left: 10px;
    top: 70px;
    width: 40px;
    height: 40px;
    background-color: #222;
    border: none;
    border-radius: 50%;
    color: white;
    display: none; /* 默认隐藏，在小屏幕上显示 */
    justify-content: center;
    align-items: center;
    cursor: pointer;
    z-index: 1001;
    box-shadow: 0 2px 5px rgba(255, 255, 255, 0.3);
    transition: background-color 0.3s ease;
}

.toc-toggle-button:hover {
    background-color: #444;
}

.toc-toggle-button svg {
    width: 24px;
    height: 24px;
}
.text-hidden {
    color: rgba(0, 0, 0, 0) !important;
    transition: color 0.5s ease !important;
}

/* 确保.text-hidden类不影响横条（::before伪元素）的可见性 */
.toc-container a.text-hidden::before {
    /* 保持横条可见，不受文本透明度影响 */
    opacity: 1;
    background-color: #ff7e79; /* 保持与原始颜色一致 */
}